/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import styles from './index.module.scss'
import { Button, Grid,Modal } from 'antd-mobile'
import { isLogin ,removeToken} from '../../utils/auth'
import { Link } from 'react-router-dom'
import { userLogout,getUserInfo } from '../../api/index'
const gridData = [
  { id: 1, text: '我的收藏', iconfont: 'icon-coll', to: '/favorite' },
  { id: 2, text: '我的出租', iconfont: 'icon-ind', to: '/rent' },
  { id: 3, text: '看房记录', iconfont: 'icon-record', to: '' },
  { id: 4, text: '成为房主', iconfont: 'icon-identity', to: '' },
  { id: 5, text: '个人资料', iconfont: 'icon-myinfo', to: '' },
  { id: 6, text: '联系我们', iconfont: 'icon-cust', to: '' },
]
export default class Map extends Component {
state = {
  isLogin:isLogin(),
  avatar: '',
  nickname: '',
}
async componentDidMount(){
  if(this.state.isLogin) {
    // 如果已经登录
   const res = await getUserInfo()
    // 如果获取成功
    if (res.data.status === 200) {
    // 提取出用户名和密码
    const { avatar, nickname } = res.data.body
    // 更新用户名和密码
    this.setState({ avatar, nickname })
    }  // 如果token无效
    else if(res.data.status === 400){
      // 移除无效的token
      // removerToken()
      // 更新成未登录状态
      this.setState({isLogin: false})
    }
  } 
 }
 logOut= async () => {
  Modal.alert('提示', '😨是否确定退出?', [
    { text: '取消' },
    {
      text: '退出',
      onPress: async () => {
        // 1. 后端退出
        await userLogout()
        // 2. 移除本地存储的 token
        removeToken()
        // 3. 改变状态
        this.setState({ isLogin: false })
      },
    },
  ])
 }
  render() {
    const { history} = this.props
    const { isLogin, avatar, nickname } = this.state
    return (
      // 个人中心页面
      <div className={styles.my}>
          {/* 1.0 背景 */}
          <img className={styles.my_bg} src="http://localhost:8080/img/profile/bg.png" /> 
           {/* 2.0 用户信息 */}
           <div className={styles.info}>
             <img  className={styles.avatar}  src={`http://localhost:8080`+avatar || 'http://localhost:8080/img/profile/avatar.png'}/> 
             <span  className={styles.username}>{nickname || '游客'}</span>
             {
              isLogin ? 
              (<Button onClick={this.logOut} size="small" type="primary" className={styles.login_btn}>
                退出
            </Button>)
              :
              ( <Button onClick={() => history.push('/login')} size="small" type="primary" className={styles.login_btn}>
              去登录
            </Button>)
             }
           </div>
           <Grid 
            data={gridData}
            columnNum={3}
            hasLine={false}
            activeStyle={true}
            className={styles.grid}
            itemStyle={{ height: 65 }}
              renderItem={(item) => {
                return (
                  // 标签式写法 <Link>
                  <Link key={item.id} to={item.to} className={styles.grid_item}>
                    <i className={`iconfont ${item.iconfont}`}></i>
                    <span className={styles.grid_item_text}>{item.text}</span>
                  </Link>
                )
              }}
            />
        {/* 4.0 底部广告 */}
        <div className={styles.ad}>
          {/* 编程式写法 history.push() */}
          <img onClick={() => history.push('/register')} className={styles.ad_img} src="http://localhost:8080/img/profile/join.png" alt="" />
        </div>
      </div>
    )
  }
}
